<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色和背景</title>
    <link rel="stylesheet" href="./css/color.css">
</head>

<body>
    <div class="ydm">
        <div class="luoli1">我不是萝莉控!</div>
        <div class="luoli2">俺はロリコンじゃねぇんだよ!</div>
        <div class="luoli3">俺はロリコンじゃねぇんだよ!</div>
        <div class="luoli4">俺はロリコンじゃねぇんだよ!</div>
        <div class="luoli5">俺はロリコンじゃねぇんだよ!</div>
        <div class="luoli6">俺はロリコンじゃねぇんだよ!</div>

        <pre>
        .ydm {
        margin: auto;
        width: 200px;
        position: relative;
        }
        .ydm div {
        width: 220px;
        height: 50px;
        border: 5px rgb(222, 138, 189) dashed;
        margin-bottom: 5px;
        }
        .luoli1 {
        background-color: skyblue;
        }
        .luoli2 {
        background-color: rgb(57, 206, 230);
        }
        .luoli3 {
        background-color: rgba(13, 170, 238, 0.3);
        }
        .luoli4 {
        background-color: #07a4b6;
        }
        .luoli5 {
        background-color: hsl(210, 90%, 49%);
        }
        .luoli6 {
        background-color: hsla(184, 84%, 50%, 0.1);
        }
        </pre>
    </div>
    <div class="laobing">
        <p>我是一个兵, 爱护老百姓。</p>
    </div>
    <div class="jlt">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>


    <div class="jianbian">
        <div class="box4 box100"></div>
        <div class="box5 box100"></div>
        <div class="box6 box100"></div>
        <div class="box7 box100"></div>
    </div>
</body>

</html>